<template>
  <div class="header-bar">
    <h1 class="title">
      <router-link :to="{ name: 'HomeView'}">豆瓣</router-link>
    </h1>
    <h1 class="titles">
      <a href="https://www.baidu.com">百度</a>
    </h1>
    <ul class="nav">
      <li>
        <router-link style="color: rgb(57, 111, 15)" :to="{ name: 'Map'}">疫情地图</router-link>
      </li>
      <li>
        <router-link style="color: rgb(107, 121, 13)" :to="{ name: 'Nba'}">NBA赛事</router-link>
      </li>
      <li>
        <router-link style="color: #2384E8" :to="{ name: 'MovieView'}">电影</router-link>
      </li>
      <li>
        <router-link style="color: #9F7860" :to="{ name: 'BookView'}">图书</router-link>
      </li>
      <li>
        <router-link style="color: #E4A813" :to="{ name: 'StatusView'}">广播</router-link>
      </li>
      <li>
        <router-link style="color: #2AB8CC" :to="{ name: 'GroupView'}">小组</router-link>
      </li>
    </ul>
    <span class="talion" @click="showTalions(value)"></span>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  props: ["value"],
  name: "header-bar",
  data() {
    return {
      msg: "bbb"
    };
  },
  methods: {
    showTalions: function(val) {
      this.$emit("showTalion", val);
    }
  }
};
</script>

<style lang="scss" scoped>
.header-bar {
  .title {
    flex: 1;
    max-width: 4.6rem;
    max-height: 2.2rem;
    margin-right: 1rem;
    font-size: 0;
    line-height: 2.2rem;
    color: #00b600;
    word-break: break-all;
    background: url()
      no-repeat;
    background-size: cover;

    a {
      display: block;
    }
  }

  .titles {
    margin-right: 1rem;
    font-size: 2em;
    color: #00b600;
    text-align: center;
    word-break: break-all;
    a {
      display: block;
    }
  }
  .yiqing {
    flex: 1;
    font-size: 1.5em;
    letter-spacing: 0.3rem;
    word-break: break-all;
    text-align: center;
  }

  ul {
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }

  li {
    display: inline-block;
    font-size: 1.6rem;
    margin-right: 0.4rem;
  }

  .talion {
    font-size: 0;
    background: url()
      no-repeat;
    background-size: cover;
    width: 2.4rem;
    height: 1.8rem;
    margin-top: 0.4rem;
  }
}
</style>
